Ext.define('HRMobile.view.employeeDetails.LanguageForm', {
    extend: 'Ext.Container',
    controllers: ['EmployeeController'],
    config: {
    	 border: true,
    	 style: 'border-left-style: solid;',
    		 items:[
    	 {
    			 xtype: 'fieldset',
    			 height: '100%',
    			 title: 'Language',
    			 items: [{
    				 xclass: 'HRMobile.view.employeeDetails.LanguageList',
    				    id: 'languageList'
    				    }]
    		},
		    {
				 xclass: 'HRMobile.view.employeeDetails.languageDetails',
				 id: 'languageDetails'
				    }
		    ]
    }
});
Ext.define('HRMobile.view.employeeDetails.LanguageList', {
    extend: 'Ext.dataview.List',
    config: {
    	height: '100%',
    	itemTpl: 
    	'<div style="font-size:15px"><b>{languageName}</b></div>',
    	store: 'LanguageStore',
    	onItemDisclosure: true
    	}
});
Ext.define('HRMobile.view.employeeDetails.languageDetails', {
	extend: 'Ext.form.Panel',
    config: {
    	modal: true,
    	centered: true,
    	hideOnMaskTap: true,
    	hidden: true,
    	width: Ext.os.is.Phone?320:450,
    	height: Ext.os.is.Phone?320:400,
    	hideAnimation: {
    		type: 'popOut',
    		duration: 250,
    		easing: 'ease-out'
    	},
    	styleHtmlContent: true,
        defaults: {
            xtype: 'fieldset',
            defaults: {
            	xtype: 'container',
            	layout: {
            		type: 'hbox'
            	},
            	defaults :{
            		xtype: 'rating',
                    readOnly: true,
                    disabled: true,
                    itemsCount: 5,
                    itemCls: 'x-rating-star', 
                    itemHoverCls: 'x-rating-star-hover',
                    labelWrap: true
            	}
                
            }
        },
        items:[{
        	xtype: 'toolbar',
            docked: 'top',
            items: [
                {xtype: 'spacer'},
                {xtype: 'button', 
                 text: 'Done', 
                 disabled: false,
                 handler: function(){Ext.getCmp('languageDetails').hide();}
                },
            ],
        	   },
               {
               title: 'Language Details',
               items: [{
            	   items:[
            	          {
                              label: 'Reading:',
                              name: 'readingLevel',
                              flex: 7
            	          },
            	          {
            	        	  xtype: 'textfield',
            	        	  name: 'readingLevelText',
            	        	  flex: 4,

            	          }]
                   
               }, {
            	   items:[
            	          {
		            		   label: 'Writing:',
		                       name: 'writingLevel',
		                       flex: 7
		            	   },
		            	   {
		            		   xtype: 'textfield',
		            		   name: 'writingLevelText',
		            		   flex: 4
		            	   }]
              }, {
            	  items: [
            	          {
            	        	  label: 'Speaking:',
                              name: 'speakingLevel',
                              flex: 7
            	          },
            	          {
            	        	  xtype: 'textfield',
		            		  name: 'speakingLevelText',
		            		  flex: 4
            	          }] 
            	  
               },{
            	   items: [
            	           {
            	        	   label: 'Listening:',
                               name: 'listeningLevel',
                               flex: 7
            	           },
            	           {
            	        	   xtype: 'textfield',
 		            		   name: 'listeningLevelText',
 		            		   flex: 4
            	           }]
                   
               }]
        }]
    }
});